<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>搜题</title>
</head>
<link rel="stylesheet" href="/bootstrap-3.3.4/dist/css/bootstrap.min.css">
<style>
    .ul-choose {
        list-style: none;
        width: 700px;
        font-size: 16px;
        position: relative;
        z-index: 10;
        /*background-color: blue;*/
        padding-left: 0px;
        color: black;
        background-color: white;
    }
    .ul-choose li {
    }
    .hover {
        background-color: lightgray;
    }
    .input-search {
        display: inline-block;
        width: 500px;
        height: 30px;
    }
    .search-btn {
        width: 30px;
        height: 30px;
        display: inline-block;
    }
    .ul-tool {
        list-style: none;
        margin-right: 30px;
    }
    .ul-tool li {
        height: 40px;
        width: 200px;
        background-color: lightgray;
        margin-bottom: 30px;
        text-align: center;
        line-height: 40px;
    }
    .input-upload {
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        width: 120px;
        height: 30px;
        position: absolute;
        z-index: 8;
    }
    .div-upload {
        position: relative;
        width: 120px;
        height: 30px;
        margin: auto;
    }
    .div-upload span {
        position: absolute;
        width: 120px;
        height: 30px;
    }
    .li-imgshow {
        position: relative;
        height: 200px;
        background-color: lightgray;
        text-align: center;
        line-height: 100px;
        color: grey;
    }
    .ul-upload {
        list-style: none;
        padding: 0 0 0;
    }
    .ul-upload li {
        width: 500px;
    }
    body {
        background-image: url("/res/loginbackground.jpg");
        background-repeat: no-repeat; overflow: visible;
        background-size: 100% 100%;
        /*width: 1400px;*/
        height: 700px;
    }
    .top ul {
        list-style: none;
        color: white;
    }

    .top ul > li {
        height: 20px;
        width: 140px;
        float: left;

    }
    .top ul>li>a{
        color: white;
        font-size: 17px;
    }
    .top .active {
        color: rgb(0, 146, 255);
    }


</style>
<body>
<div style="background-color: black;width: 100%;display: inline-block;align-content: center" class="top">
    <ul>
        <li><img src="/res/xxhjx.png" style="width: 50px;height: 50px"/>信息化教学</li>
    </ul>
    <ul style="display: inline-block;margin-left: 20%">
        <li><a target="_blank" href="http://mooc1.chaoxing.com/course/201143535.html">首页</a></li>
        <li><a target="_blank" href="http://mooc1.chaoxing.com/course/201143535.html?edit=false&knowledgeId=121666146&module=2&v=1528300271256#content">课程</a></li>
        <li><a target="_blank" href="http://mooc1.chaoxing.com/course/201143535.html?edit=false&knowledgeId=121666146&module=3&v=1528300286551#content">资源</a></li>
        <li ><a class="active" href="">工具</a></li>
        <li><a target="_blank" href="http://mooc1.chaoxing.com/course/201143535.html?edit=false&knowledgeId=121666146&module=7&v=1528301303461#content">大纲</a></li>

    </ul>
    <ul style="float: right">
        <li><a target="_blank" href="https://passport2.chaoxing.com/login?fid=&refer=">登录</a></li>
    </ul>
</div>


<div class="container" style="margin-top: 50px">
    <div class="row" style="">
        <ul class="col-sm-2 ul-tool">
            <li onclick="openJavaComile()">在线编译</li>
            <li onclick="openChatbot()">对话机器人</li>
        </ul>
        <form class="form-group col-sm-7" id="formSubmit" style="">
            <span>
                 <input class="input-search" type="text" name="title" oninput="OnInput(event)" autocomplete="off">
                 <img src="/res/photograph.png" class="search-btn">
            </span>

            <input type="submit" value="搜题">
            <ul class="ul-choose">

            </ul>
            <ul class="ul-upload">
                <li class="li-imgshow">请选择图片</li>
                <li>
                    <div class="div-upload">
                        <span>
                            <img src="/res/upload.png" style="height: 30px; width: 30px">
                            本地上传图片
                        </span>
                        <input type="file" class="input-upload">
                    </div>
                </li>
            </ul>

        </form>
        <ul class="col-sm-2 ul-tool">
            <li href="#">在线考试</li>
            <li href="#">在线论坛</li>
        </ul>

    </div>


</div>


<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/public/layer/layer.js"></script>
<script src="/js/common.js"></script>
<script>
    $(".input-upload").on("change", function (e) {
        console.log(e);
        var file = this.files[0];
        console.log(this.files.length);
        var img = document.createElement("img");
        img.height="200";
        img.width="500";
        img.style.position="absolute";
        img.style.left = "0"
        img.style.zIndex="9"
        $(".li-imgshow").append(img)
        $.operate.jsonPostUploadIMG("/front/question/img", file, function (res) {
            console.log(res)
            if (res.code == 200) {
                var data = res.data
                window.location.href = "/front/question/detail?id=" + data[0].id
            } else {
                $.myLayui.errorMsg(res.msg)
            }
        })

        var reader = new FileReader();
        reader.onload = function (ev) {
            console.log(ev.target.result)
            img.src = ev.target.result
        }
        reader.readAsDataURL(file);

    })

    function openJavaComile() {
        $.myLayui.openFullScreen("/front/compile")
    }
    function openChatbot() {
        $.myLayui.openFullScreen("/front/chatbot")
    }

    $("#formSubmit").submit(function () {
        var data = $.opData.getFormJson("#formSubmit")
        console.log(JSON.stringify(data))
        $.operate.jsonPost("/front/compile", data, function (res) {
            console.log(JSON.stringify(res))
        })

        return false;
    })

    function OnInput(event) {
        console.log(event)
        console.log(event.target.value)
        var data = {
            title: event.target.value
        }
        $.operate.jsonPost("/front/question", data, function (res) {
            console.log(JSON.stringify(res))
            if (res.data != null) {
                var arr = res.data;
                console.log("arr:" + arr.length)
                var lis = ""
                for (var i = 0; i < arr.length; i ++) {
                    console.log(arr[i])
                    lis += "<li value='"+ arr[i].id +"'>" + arr[i].title + "</li>"
                }
                $(".ul-choose").empty()
                $(".ul-choose").html(lis)
            }
        })

    }


    var chooseIndex = -1;// 当前选中li的下标 -1为未选中
    $(document).keydown(function(event){
        console.log(event.keyCode);
        var liSize =  $(".ul-choose").children().length

        if (event.keyCode == 38) { //上
            if (chooseIndex > 0) {
                $(".ul-choose").children().eq(chooseIndex).removeClass("hover")
                chooseIndex = chooseIndex - 1;
                $(".ul-choose").children().eq(chooseIndex).addClass("hover")
            } else {
                $(".ul-choose").children().eq(chooseIndex).removeClass("hover")
                chooseIndex = -1;
            }

        }
        if (event.keyCode == 40) { // 下
            if (liSize - 1 > chooseIndex) {
                $(".ul-choose").children().eq(chooseIndex).removeClass("hover")
                chooseIndex = chooseIndex + 1;
                $(".ul-choose").children().eq(chooseIndex).addClass("hover")
            } else {
                $(".ul-choose").children().eq(chooseIndex).removeClass("hover")
                chooseIndex = -1;
            }
        }

        if (event.keyCode == 13) { // 回车
            if (chooseIndex != -1) {
                console.log("hover:" + $(".ul-choose").find(".hover").text())
                var id = $(".ul-choose").find(".hover").val()
                window.location.href = "/front/question/detail?id=" + id

            }
        }
        console.log(chooseIndex)

    });

</script>
</body>
</html>